<template>
  <div class="news-detail padding-15" v-if="detailData.hasOwnProperty('pick')">
    <h2 class="news-title">
      <van-tag color="#F5A703" size="large" text-color="#fff" v-if="detailData.is_end == 0">进行中</van-tag>
      <van-tag color="#F54B03" size="large" text-color="#fff" v-if="detailData.is_end == 1">已结束</van-tag>
      {{ detailData.title }}</h2>
    <div class="publisher-area">
      <van-image width="40" height="40" :src="$common.returnImg(detailData.pic)"></van-image>
      <div>
        <p>
          {{ detailData.user_name }}
          <span v-if="detailData.over_time >= 1" class="active-label">
            {{ parseInt(detailData.over_time) }}天后结束
          </span>
          <span v-else-if="detailData.over_time > 0 && detailData.over_time < 1">
            {{ parseInt(detailData.over_time * 24) }}小时后结束
          </span>
          </p>
        <span class="second-text">{{ detailData.date }} - {{ detailData.untildate }}</span>
      </div>
    </div>
    <p>{{ detailData.content }}</p>
    <div class="vote-list">
      <div
        class="vote-item"
        @click="voteItem(item)"
        v-for="item in detailData.pick" :key="`${item.title}`">
        <!-- 投票进度条 -->
        <div 
          class="voted"
          :class="{'my-vote': item.is_pick == 1}"
          :style="{'width': `calc(( 100vw - 30px) * ${detailData.is_end == 1 || detailData.is_pick == 1 ? item.proportion : 0})`}">
        </div>
        <!-- 文本 -->
        <p 
          class="label"
          :class="{'voted-label': detailData.is_end == 1 || detailData.is_pick == 1, 'active-label': item.is_pick == 1}">
          <span class="van-multi-ellipsis--l2">{{ item.title }}</span>
          <!-- <van-icon name="success" v-if="item.is_pick == 1" size="21px"></van-icon> -->
        </p>
        <!-- 计数 -->
        <span
          class="count" 
          :class="{'active-count': item.is_pick == 1}" 
          v-if="detailData.is_end == 1 || detailData.is_pick == 1">
          <span class="number">{{ item.num }}</span>票
        </span>
      </div>
    </div>
    

    <!-- <h3>精彩推荐</h3>
    <div class="reference-card">
      <div class='content'>
        <h4 class="title van-multi-ellipsis--l2">标题标题标题标题</h4>
        <p  class='sub-title van-multi-ellipsis'>名字&nbsp;&nbsp;2019-12-19&nbsp;&nbsp;12245阅</p>
      </div>
      <van-image src="https://img.yzcdn.cn/vant/cat.jpeg" width="115" height="80"></van-image>
    </div>
    <div class="reference-card">
      <div class='content'>
        <h4 class="title van-multi-ellipsis--l2">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</h4>
        <p  class='sub-title'><span class="user-name van-ellipsis">名字很长有很多很多个字</span><span>&nbsp;&nbsp;2019-12-19&nbsp;&nbsp;12245阅</span></p>
      </div>
      <van-image src="https://img.yzcdn.cn/vant/cat.jpeg" width="115" height="80"></van-image>
    </div> -->
  </div>
</template>

<script type="text/javascript">
  export default {
    data() {
      return {
        detailData: {}
      }
    },
    activated() {
      this.$bridge.callHandler('navBack')
      this.$bridge.callHandler('navTitle', {title: '投票详情'})
      this.detailData = {}
      this.$store.commit('changeStatus', {key: 'voted', value: false})
      this.getDetailData()
    },
    methods: {
      getDetailData() {
        this.$toast({
          duration: 0,
          forbidClick: true,
          className: 'loading-toast',
          icon: require('../../assets/loading.gif'),
        })
        let self = this
        let config = {
          url: `${this.$common.basePath}message/vote.php`,
          data: {
            do: 'detail',
            vote_id: parseInt(this.$route.query.id),
            user_id: parseInt(this.$store.state.userId)
          },
          method: 'POST'
        }
        if(!self.newsFinished || init) {
          self.$axios(config).then(res => {
            self.detailData = res.data
            self.$toast.clear()
          }).catch(err => {
            this.$toast.fail({
              message: err.msg
            })
          })
        }
      },
      /**
       * 进行投票 验证投票状态
       * @param  {[type]} item [description]
       * @return {[type]}      [description]
       */
      voteItem(item) {
        if (this.detailData.is_end == 1) {
          this.$dialog.alert({
            title: '提示',
            message: '本次投票已结束'
          })
        } else if(this.detailData.is_pick == 1) {
          this.$dialog.alert({
            title: '提示',
            message: '你已经投过票了哦~'
          })
        } else {
          this.$dialog.confirm({
            title: '提示',
            message: `确认投票给 ${item.title} ?`
          }).then(_ => {
            this.submitVote(item)
          }).catch(() => {});
        }
      },
      /**
       * 提交投票
       * @return {[type]} [description]
       */
      submitVote(item) {
        this.$toast.loading({message: '投票中...'})
        let self = this
        let config = {
          url: `${this.$common.basePath}message/vote.php`,
          data: {
            do: 'do',
            pick_id: item.id,
            comment: '这是测试文本',
            app_id: parseInt(this.$route.query.id),
            user_id: parseInt(this.$store.state.userId)
          },
          method: 'POST'
        }
        self.$axios(config).then(res => {
          this.$toast.success({message: res.msg})
          this.$store.commit('changeStatus', {key: 'voted', value: true})
          self.getDetailData() // reload
        }).catch(err => {
          this.$toast.fail({
            message: err.msg
          })
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  h2 {
    font-size: 20px;
  }
  h3 {
    margin-bottom: 0;
    font-size: 17px;
  }
  .padding-15 {
    padding: 15px;
  }
  .news-title {
    margin: 0 0 15px 0;
  }
  .active-label {
    color: #2e79ff;
  }
  .vote-list {
    .vote-item {
      position: relative;
      min-height: 51px;
      margin: 15px 0;
      z-index: 80;
      background-color: #f9f9f9;
      border-radius: 4px;
      .voted {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 0px;
        transition: all 0.8s ease-in-out;
        z-index: -1;
        background-color: #ebebeb;
        border-radius: 4px;
        &.my-vote {
          color: #4d8bfe;
          background-color: #dae5f9;
        }
        > .label {
          width: calc( 100vw - 90px); /* aviod width */
        }

      }
      .label {
        display: flex;
        text-align: center;
        z-index: 100;
        padding: 15px;
        margin: 0;
        &.voted-label {
          text-align: left;
          padding: 15px 45px 15px 15px;
        }
      }
      .count {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 100;
        padding: 15px;
        &.active-count {
          color: #4d8bfe;
        }
        .number {
          font-weight: bold;
        }
      }
    }
  }
  .publisher-area {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #999;
    font-size: 10px;
    .padding-l-10 {
      padding-left: 10px;
    }
    .van-image {
      margin-right: 10px;
    }
    & > div {
      height: 35px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      p {
        margin: 0;
      }
      
    }
    & > .second-text {
      height: 18px;
      line-height: 18px;
    }
  }
  .reference-card {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;
    padding: 15px 0;
    &:last-child {
      border-bottom: none;
    }
    .content {
      height: 80px;
      .title {
        margin-top: 0;
        height: 42px;
        width: calc(100vw - 30px - 115px - 15px);
        font-weight: 500;
        color: #333;
      }
      .sub-title {
        display: flex;
        align-items: center;
        width: calc(100vw - 30px - 115px - 15px);
        font-size: 10px;
        color: #999;
        .user-name {
          display: inline-block;
          width: 80px!important;
        }
      }
    }
  }
</style>